<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常见问题 - 黄淮学院校园活动管理系统</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 自定义配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#0FC6C2',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        info: '#86909C',
                        dark: '#1D2129',
                        light: '#F2F3F5'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-all;
            }
            .btn-secondary {
                @apply bg-white border border-primary text-primary px-4 py-2 rounded-lg hover:bg-primary/5 transition-all;
            }
            .nav-item {
                @apply px-4 py-2 rounded-lg transition-all hover:bg-primary/10 cursor-pointer;
            }
            .nav-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
            .faq-item {
                @apply border border-gray-200 rounded-lg mb-4 overflow-hidden;
            }
            .faq-question {
                @apply flex justify-between items-center p-4 cursor-pointer transition-all hover:bg-gray-50;
            }
            .faq-answer {
                @apply p-4 pt-0 text-gray-600 border-t border-gray-100 hidden;
            }
            .category-item {
                @apply px-4 py-2 rounded-lg cursor-pointer transition-all hover:bg-primary/10;
            }
            .category-item-active {
                @apply bg-primary/10 text-primary font-medium;
            }
        }
    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body class="bg-gray-50 text-dark">
    <!-- 顶部导航栏 -->
    <header id="navbar" class="fixed top-0 left-0 right-0 bg-white shadow-sm z-50 transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16">
                <!-- Logo -->
                <div class="flex items-center space-x-2">
                    <div class="w-10 h-10 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-graduation-cap text-white text-xl"></i>
                    </div>
                    <div>
                        <h1 class="text-xl font-bold text-primary">黄淮学院</h1>
                        <p class="text-xs text-info">校园活动管理系统</p>
                    </div>
                </div>
                
                <!-- 导航链接 - 桌面端 -->
                <nav class="hidden md:flex items-center space-x-2">
                    <a href="index.html" class="nav-item">首页</a>
                    <a href="activities.html" class="nav-item">活动列表</a>
                    <a href="discover.html" class="nav-item">发现</a>
                    <a href="about.html" class="nav-item">关于我们</a>
                </nav>
                
                <!-- 用户操作 -->
                <div class="flex items-center space-x-4">
                    <button id="searchBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all">
                        <i class="fa fa-search text-info"></i>
                    </button>
                    <button id="notificationsBtn" class="p-2 rounded-full hover:bg-gray-100 transition-all relative">
                        <i class="fa fa-bell text-info"></i>
                        <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
                    </button>
                    <div id="userMenu" class="relative">
                        <button id="userMenuBtn" class="flex items-center space-x-2 hover:bg-gray-100 p-1 rounded-lg transition-all">
                            <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-primary/20">
                            <span class="hidden md:inline-block font-medium">游客</span>
                            <i class="fa fa-caret-down text-xs text-info"></i>
                        </button>
                        <!-- 用户下拉菜单 -->
                        <div id="userDropdown" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-50 hidden">
                            <a href="login.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-sign-in mr-2 text-info"></i>登录
                            </a>
                            <a href="register.html" class="block px-4 py-2 text-sm hover:bg-gray-100 transition-all">
                                <i class="fa fa-user-plus mr-2 text-info"></i>注册
                            </a>
                        </div>
                    </div>
                    <!-- 移动端菜单按钮 -->
                    <button id="mobileMenuBtn" class="md:hidden p-2 rounded-lg hover:bg-gray-100 transition-all">
                        <i class="fa fa-bars text-info"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 搜索框 -->
        <div id="searchBox" class="container mx-auto px-4 pb-4 hidden">
            <div class="relative">
                <input type="text" placeholder="搜索活动、主办方..." class="w-full pl-10 pr-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info"></i>
            </div>
        </div>
        
        <!-- 移动端导航菜单 -->
        <div id="mobileMenu" class="md:hidden container mx-auto px-4 pb-4 hidden">
            <nav class="flex flex-col space-y-1">
                <a href="index.html" class="nav-item">首页</a>
                <a href="activities.html" class="nav-item">活动列表</a>
                <a href="discover.html" class="nav-item">发现</a>
                <a href="about.html" class="nav-item">关于我们</a>
                <div class="pt-2 flex space-x-2">
                    <a href="login.html" class="btn-primary flex-1 text-center">登录</a>
                    <a href="register.html" class="btn-secondary flex-1 text-center">注册</a>
                </div>
            </nav>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 pt-24 pb-16">
        <!-- 页面标题 -->
        <section class="mb-10">
            <h1 class="text-3xl font-bold mb-2">常见问题</h1>
            <p class="text-info">查找关于校园活动管理系统的常见问题解答</p>
        </section>

        <!-- 搜索问题 -->
        <section class="mb-10">
            <div class="relative">
                <input type="text" id="searchFAQ" class="w-full pl-10 pr-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50 text-lg" placeholder="搜索您遇到的问题...">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-info text-xl"></i>
            </div>
        </section>

        <!-- 常见问题分类和内容 -->
        <section class="bg-white rounded-xl shadow-sm p-6 md:p-8">
            <div class="flex flex-col md:flex-row gap-6">
                <!-- 左侧分类导航 -->
                <div class="md:w-1/4">
                    <div class="md:sticky md:top-24 space-y-1">
                        <div class="category-item category-item-active" data-category="all">
                            <i class="fa fa-question-circle mr-2"></i> 所有问题
                        </div>
                        <div class="category-item" data-category="account">
                            <i class="fa fa-user-o mr-2"></i> 账号问题
                        </div>
                        <div class="category-item" data-category="activity">
                            <i class="fa fa-calendar-o mr-2"></i> 活动相关
                        </div>
                        <div class="category-item" data-category="registration">
                            <i class="fa fa-check-square-o mr-2"></i> 报名相关
                        </div>
                        <div class="category-item" data-category="publish">
                            <i class="fa fa-paper-plane-o mr-2"></i> 发布活动
                        </div>
                        <div class="category-item" data-category="payment">
                            <i class="fa fa-credit-card mr-2"></i> 支付相关
                        </div>
                        <div class="category-item" data-category="other">
                            <i class="fa fa-ellipsis-h mr-2"></i> 其他问题
                        </div>
                    </div>
                </div>
                
                <!-- 右侧FAQ内容 -->
                <div class="md:w-3/4">
                    <!-- 所有问题 - 默认显示 -->
                    <div id="all" class="faq-category">
                        <!-- FAQ项目1 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何注册账号？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>注册账号非常简单，您可以通过以下步骤进行注册：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>点击页面右上角的"注册"按钮</li>
                                    <li>填写您的学号/工号、姓名、密码等信息</li>
                                    <li>输入验证码并同意用户协议</li>
                                    <li>点击"注册"完成账号创建</li>
                                </ol>
                                <p class="mt-2">注册完成后，您可以使用学号/工号和密码登录系统。</p>
                            </div>
                        </div>
                        
                        <!-- FAQ项目2 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">忘记密码怎么办？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如果您忘记了密码，可以通过以下方式重置：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>在登录页面点击"忘记密码"</li>
                                    <li>输入您的学号/工号和注册时使用的邮箱</li>
                                    <li>系统会向您的邮箱发送验证码</li>
                                    <li>输入验证码后，设置新密码</li>
                                    <li>点击"确认"完成密码重置</li>
                                </ol>
                                <p class="mt-2">如果您无法通过邮箱重置密码，请联系系统管理员协助处理。</p>
                            </div>
                        </div>
                        
                        <!-- FAQ项目3 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何报名参加活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>报名参加活动的步骤如下：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>在首页或活动列表中找到您感兴趣的活动</li>
                                    <li>点击活动进入详情页</li>
                                    <li>查看活动详情，确认活动时间和地点</li>
                                    <li>点击"立即报名"按钮</li>
                                    <li>填写报名信息（如果活动需要额外信息）</li>
                                    <li>确认报名，完成报名流程</li>
                                </ol>
                                <p class="mt-2">报名成功后，您可以在"我的活动"中查看报名状态。</p>
                            </div>
                        </div>
                        
                        <!-- FAQ项目4 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何取消活动报名？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如需取消活动报名，请按照以下步骤操作：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，点击右上角用户头像，选择"个人中心"</li>
                                    <li>在左侧菜单中选择"我的活动"</li>
                                    <li>找到需要取消报名的活动，点击"取消报名"按钮</li>
                                    <li>确认取消操作</li>
                                </ol>
                                <p class="mt-2 text-warning">注意：部分活动可能设有取消报名的截止时间，请在规定时间内完成取消操作。</p>
                            </div>
                        </div>
                        
                        <!-- FAQ项目5 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何发布新活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>发布新活动需要您具备活动发布权限，发布步骤如下：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，点击顶部导航栏中的"发布活动"按钮</li>
                                    <li>填写活动基本信息（标题、时间、地点等）</li>
                                    <li>上传活动封面图片</li>
                                    <li>填写活动详情，设置报名信息</li>
                                    <li>设置活动其他选项（如费用、联系方式等）</li>
                                    <li>预览活动信息，确认无误后点击"发布活动"</li>
                                </ol>
                                <p class="mt-2">活动发布后需要经过审核才能在前台显示，请耐心等待。</p>
                            </div>
                        </div>
                        
                        <!-- FAQ项目6 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何修改已发布的活动信息？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如需修改已发布的活动信息，请按以下步骤操作：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，进入"个人中心"</li>
                                    <li>在左侧菜单中选择"我发布的活动"</li>
                                    <li>找到需要修改的活动，点击"编辑"按钮</li>
                                    <li>修改活动信息后，点击"保存修改"</li>
                                </ol>
                                <p class="mt-2">请注意，已开始或已结束的活动可能无法修改关键信息。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 账号问题 -->
                    <div id="account" class="faq-category hidden">
                        <!-- 账号相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何修改个人资料？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>修改个人资料的步骤如下：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，点击右上角用户头像，选择"个人中心"</li>
                                    <li>在左侧菜单中选择"个人资料"</li>
                                    <li>点击"编辑资料"按钮</li>
                                    <li>修改您的个人信息，如头像、昵称、联系方式等</li>
                                    <li>点击"保存"完成修改</li>
                                </ol>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">一个人可以注册多个账号吗？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>为了保证账号安全和系统秩序，我们不建议您注册多个账号。每个学号/工号只能注册一个账号。如果您有特殊需求，请联系系统管理员。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">账号被盗用怎么办？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如果您发现账号被盗用，请立即采取以下措施：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>尝试通过"忘记密码"功能重置密码</li>
                                    <li>联系系统管理员冻结账号</li>
                                    <li>提供您的身份信息，申请找回账号</li>
                                </ol>
                                <p class="mt-2">为了保护账号安全，建议您定期修改密码，并开启双重认证（如果系统支持）。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 活动相关 -->
                    <div id="activity" class="faq-category hidden">
                        <!-- 活动相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何查看活动详情？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>查看活动详情的方法：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>在首页或活动列表中浏览活动</li>
                                    <li>点击您感兴趣的活动卡片</li>
                                    <li>进入活动详情页，查看完整的活动信息</li>
                                </ol>
                                <p class="mt-2">在活动详情页，您可以查看活动描述、时间地点、报名信息等。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何搜索特定的活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>您可以通过以下方式搜索特定活动：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>使用页面顶部的搜索框，输入关键词搜索</li>
                                    <li>在活动列表页，使用筛选功能按分类、时间等筛选</li>
                                    <li>在"发现"页面，查看系统推荐的活动</li>
                                </ol>
                                <p class="mt-2">建议使用更精确的关键词或组合筛选条件，以获得更准确的搜索结果。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">活动取消或延期如何通知？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如果您已报名的活动发生取消或延期，系统会通过以下方式通知您：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>站内消息通知（右上角铃铛图标）</li>
                                    <li>短信通知（如果您已绑定手机号）</li>
                                    <li>邮件通知（如果您已绑定邮箱）</li>
                                </ol>
                                <p class="mt-2">请保持您的联系方式更新，以便及时收到活动变动通知。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 报名相关 -->
                    <div id="registration" class="faq-category hidden">
                        <!-- 报名相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">为什么我无法报名某些活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>无法报名某些活动可能有以下原因：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>活动报名已截止</li>
                                    <li>活动人数已达上限</li>
                                    <li>您不满足活动设置的报名条件（如特定学院、年级等）</li>
                                    <li>您的账号可能存在异常状态</li>
                                </ol>
                                <p class="mt-2">如果您确认以上情况都不适用，请联系系统管理员或活动主办方咨询。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何查看我已报名的活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>查看已报名活动的步骤：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，点击右上角用户头像，选择"个人中心"</li>
                                    <li>在左侧菜单中选择"我的活动"</li>
                                    <li>您可以查看所有已报名、已参加和已取消的活动</li>
                                </ol>
                                <p class="mt-2">在"我的活动"页面，您还可以按状态筛选活动，查看活动详情或取消报名。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 发布活动 -->
                    <div id="publish" class="faq-category hidden">
                        <!-- 发布活动相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">谁可以发布活动？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>以下人员可以申请发布活动：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>各学院、部门的教师代表</li>
                                    <li>经认证的学生组织负责人</li>
                                    <li>经学校批准的社团负责人</li>
                                </ol>
                                <p class="mt-2">如果您需要申请发布活动的权限，请联系系统管理员提交相关证明材料。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">活动发布后多久可以审核通过？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>一般情况下，活动审核会在1-2个工作日内完成。审核时间可能会受到以下因素影响：</p>
                                <ul class="list-disc list-inside mt-2 space-y-1">
                                    <li>活动内容的完整性和合规性</li>
                                    <li>当前待审核活动的数量</li>
                                    <li>是否需要补充材料或信息</li>
                                </ul>
                                <p class="mt-2">建议您提前至少3-5天发布活动，以确保有足够的时间完成审核和宣传。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 支付相关 -->
                    <div id="payment" class="faq-category hidden">
                        <!-- 支付相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何进行活动费用支付？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>对于收费活动，支付步骤如下：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>在活动详情页点击"立即报名"</li>
                                    <li>填写报名信息后，点击"确认并支付"</li>
                                    <li>选择支付方式（微信支付、支付宝等）</li>
                                    <li>按照提示完成支付</li>
                                </ol>
                                <p class="mt-2">支付成功后，系统会自动更新您的报名状态。</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何申请退款？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>申请退款的步骤：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>登录系统后，进入"我的活动"</li>
                                    <li>找到已支付但未参加的活动，点击"申请退款"</li>
                                    <li>填写退款原因</li>
                                    <li>提交申请并等待审核</li>
                                </ol>
                                <p class="mt-2">退款政策可能因活动而异，请在报名前仔细阅读活动说明中的退款条款。一般来说，活动开始前一定时间内可以申请退款，但可能会收取一定比例的手续费。</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 其他问题 -->
                    <div id="other" class="faq-category hidden">
                        <!-- 其他相关问题 -->
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">如何联系系统管理员？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>您可以通过以下方式联系系统管理员：</p>
                                <ul class="list-disc list-inside mt-2 space-y-1">
                                    <li>发送邮件至：admin@huanghuai.edu.cn</li>
                                    <li>工作时间致电：0396-2853611</li>
                                    <li>前往信息技术中心（办公楼4楼）咨询</li>
                                </ul>
                                <p class="mt-2">工作时间：周一至周五 8:00-17:30</p>
                            </div>
                        </div>
                        
                        <div class="faq-item">
                            <div class="faq-question">
                                <h3 class="font-medium">系统使用时遇到技术问题怎么办？</h3>
                                <i class="fa fa-angle-down text-info transition-transform duration-300"></i>
                            </div>
                            <div class="faq-answer">
                                <p>如果您在使用系统时遇到技术问题，请尝试以下方法：</p>
                                <ol class="list-decimal list-inside mt-2 space-y-1">
                                    <li>清除浏览器缓存和Cookie，重新登录</li>
                                    <li>尝试使用其他浏览器访问系统</li>
                                    <li>检查您的网络连接是否正常</li>
                                    <li>如果问题仍然存在，请联系系统管理员</li>
                                </ol>
                                <p class="mt-2">联系管理员时，请提供详细的问题描述、错误提示信息以及您使用的设备和浏览器信息，以便我们能够更快地解决问题。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 仍有问题 -->
        <section class="mt-12">
            <div class="bg-primary/5 rounded-xl p-6 text-center">
                <h2 class="text-xl font-bold mb-3">仍有问题？</h2>
                <p class="text-gray-600 mb-4">如果您没有找到想要的答案，或者有其他问题</p>
                <a href="contact.html" class="btn-primary inline-flex items-center gap-2">
                    <i class="fa fa-envelope-o"></i> 联系我们
                </a>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <div class="w-10 h-10 bg-white rounded-lg flex items-center justify-center">
                            <i class="fa fa-graduation-cap text-primary text-xl"></i>
                        </div>
                        <h3 class="text-xl font-bold">黄淮学院</h3>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">校园活动管理系统致力于为全校师生提供便捷的活动信息服务平台。</p>
                    <div class="flex space-x-4">
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-weibo"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-wechat"></i>
                        </a>
                        <a href="#" class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-all">
                            <i class="fa fa-qq"></i>
                        </a>
                    </div>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">快速链接</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="index.html" class="hover:text-white transition-all">首页</a></li>
                        <li><a href="activities.html" class="hover:text-white transition-all">活动列表</a></li>
                        <li><a href="discover.html" class="hover:text-white transition-all">发现</a></li>
                        <li><a href="about.html" class="hover:text-white transition-all">关于我们</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">帮助中心</h4>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="faq.html" class="hover:text-white transition-all">常见问题</a></li>
                        <li><a href="contact.html" class="hover:text-white transition-all">联系我们</a></li>
                        <li><a href="privacy.html" class="hover:text-white transition-all">隐私政策</a></li>
                        <li><a href="terms.html" class="hover:text-white transition-all">用户协议</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-medium mb-4">联系我们</h4>
                    <ul class="space-y-3 text-gray-400">
                        <li class="flex items-start">
                            <i class="fa fa-map-marker mt-1 mr-3"></i>
                            <span>河南省驻马店市开源大道6号黄淮学院</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-phone mr-3"></i>
                            <span>0396-2853611</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fa fa-envelope mr-3"></i>
                            <span>contact@huanghuai.edu.cn</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-white/10 text-center text-gray-500 text-sm">
                <p>© 2023 黄淮学院校园活动管理系统 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
        <i class="fa fa-angle-up text-xl"></i>
    </button>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // FAQ问题切换
            const faqQuestions = document.querySelectorAll('.faq-question');
            
            faqQuestions.forEach(question => {
                question.addEventListener('click', function() {
                    const answer = this.nextElementSibling;
                    const icon = this.querySelector('i');
                    
                    // 切换答案显示/隐藏
                    answer.classList.toggle('hidden');
                    // 切换图标旋转
                    icon.classList.toggle('rotate-180');
                });
            });
            
            // 分类切换
            const categoryItems = document.querySelectorAll('.category-item');
            const faqCategories = document.querySelectorAll('.faq-category');
            
            categoryItems.forEach(item => {
                item.addEventListener('click', function() {
                    const category = this.getAttribute('data-category');
                    
                    // 移除所有分类的活动状态
                    categoryItems.forEach(cat => {
                        cat.classList.remove('category-item-active');
                    });
                    
                    // 添加当前分类的活动状态
                    this.classList.add('category-item-active');
                    
                    // 隐藏所有分类内容
                    faqCategories.forEach(cat => {
                        cat.classList.add('hidden');
                    });
                    
                    // 显示当前分类内容
                    document.getElementById(category).classList.remove('hidden');
                });
            });
            
            // FAQ搜索功能
            const searchInput = document.getElementById('searchFAQ');
            
            searchInput.addEventListener('input', function() {
                const searchTerm = this.value.toLowerCase().trim();
                const allQuestions = document.querySelectorAll('.faq-question h3');
                
                allQuestions.forEach(question => {
                    const questionText = question.textContent.toLowerCase();
                    const faqItem = question.closest('.faq-item');
                    const answerText = faqItem.querySelector('.faq-answer').textContent.toLowerCase();
                    
                    if (questionText.includes(searchTerm) || answerText.includes(searchTerm)) {
                        faqItem.style.display = 'block';
                    } else {
                        faqItem.style.display = 'none';
                    }
                });
            });
        });
    </script>
</body>
</html>